<template>
  <div>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="登录" name="login">
          <withPsw />
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
          <Register />
        </el-tab-pane>
        <el-tab-pane label="重置密码" name="reset">
          <resetPsw />
        </el-tab-pane>
        <el-tab-pane label="验证码登录" name="mobile">
          <withMobile />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import withPsw from './withPsw'
import resetPsw from './resetPsw'
import withMobile from './withMobile'
import Register from './register'

export default {
  name: 'AppLogin',
  components: { withPsw, resetPsw, withMobile, Register },
  directives: {},
  filters: {},
  props: {
    title: { type: String, default: '我的' }
  },

  data() {
    return {}
  },
  computed: {
    activeName: {
      get() {
        return this.$store.state.appView.login
      },
      set(val) {
        this.$store.dispatch('appView/selectLogin', val)
      }
    }
  },
  async created() {
    console.log('ssss,ss login app')
    this.changeCurrent('login')
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },

    changeCurrent(selected) {
      console.log('xxxx, changeCurrent', selected)
      this.activeName = selected
    }
  }
}
</script>

<style type="text/css"></style>
